<template>
    <div>
        <div style="display: flex;justify-content: end;">
            <el-form :model="conditionForm" class="conditionForm" :inline="true">
                <!-- <el-row type="flex" justify="end"> -->
                <!-- <el-col class="colflex-right"> -->
                <el-form-item label="上传时间:">
                    <el-date-picker v-model="conditionForm.dateTimes" type="datetimerange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']"
                        size="medium" />
                </el-form-item>
                <el-form-item label="结果:">
                    <el-select v-model="conditionForm.status" clearable placeholder="请选择查询的结果类型" size="medium">
                        <!-- <el-option label="" value=""></el-option> -->
                        <el-option v-for="(value, key) in uploadStatusEnum" :key="key" :label="value"
                            :value="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作类型:">
                    <el-select v-model="conditionForm.operateType" clearable placeholder="请选择查询的操作类型" size="medium">
                        <!-- <el-option label="" value=""></el-option> -->
                        <el-option v-for="(value, key) in operateTypeEnum" :key="key" :label="value"
                            :value="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="setCondition">查询</el-button>
                </el-form-item>
                <!-- </el-col> -->

                <!-- </el-row> -->
            </el-form>
        </div>


        <el-row class="table-container">
            <el-table :data="dataTable" border @selection-change="handleSelectionChange" v-loading="tableLoading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="开始时间" width="230">
                    <template v-slot="scope">
                        <span>{{ timeFormat(scope.row.startTime, 'y2s') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结束时间" width="230">
                    <template v-slot="scope">
                        <span>{{ timeFormat(scope.row.endTime, 'y2s') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作类型" width="200">
                    <template v-slot="scope">
                        <span>{{ operateTypeFormat(scope.row.operateType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdBy" label="处理人" width="120" />
                <el-table-column label="结果">
                    <template v-slot="scope">
                        <el-tag :type="getTagType(scope.row.maintainStatus)">{{ uploadFormat(scope.row.maintainStatus)
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="原因" width="200">
                    <template v-slot="scope">
                        <el-button type="success" size="small" @click="showLog(scope.row.businessId)"
                            v-if="scope.row.maintainStatus == 3 || scope.row.maintainStatus == 9">查看原因</el-button>
                        <span v-else>无</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-pagination :total="pageInfo.total" background layout="total,sizes, prev, pager, next"
                :page-size="pageInfo.pageSize" :current-page="pageInfo.pageIndex" :page-sizes="[5, 10, 20, 30, 40]"
                @size-change="pageSizeChange" @current-change="selectData" style="float: right;"></el-pagination>
        </el-row>
        <el-dialog :visible.sync="reasonListShow" v-dialogDrag title="原因列表" :append-to-body="true" top="5vh" width="80%">
            <LogDetail :reason-list="reasonList" />
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { Ref, onMounted, ref } from 'vue'
import { timeFormat, timeRangeTransform } from "@/utils/time"
import LogDetail from './LogDetail.vue'
import { exceptionQuery, logQuery } from '@/requests/api/material'
import { usePagination } from "@/hooks/usePagination"
import { queryParamsInit } from '@/views/data'
onMounted(() => {
    selectData();
})
const uploadStatusEnum: Record<string, string> = {
    "1": '进行中',
    "2": '成功',
    "3": '警告',
    "9": '失败',
}
const operateTypeEnum: Record<string, string> = {
    "1": '成本维护',
    "2": '成本累计',
    "3": '成本更新',
}
const conditionForm = ref({
    dateTimes: [],
    status: "",
    operateType: ""
})
const uploadFormat = (value: number) => {
    return uploadStatusEnum[`${value}`]
}
const operateTypeFormat = (value: number) => {
    return operateTypeEnum[`${value}`]
}
const queryParams: Ref<Record<string, any>> = ref(Object.assign({
    "condition": {
        "status": "",
        "startTime": "",
        "endTime": "",
        operateType: ""
    }
}, queryParamsInit))
const { dataTable,
    pageInfo,
    pageSizeChange,
    selectData, tableLoading } = usePagination(queryParams, logQuery)
const handleSelectionChange = () => { }
const setCondition = () => {
    console.log('查询条件', conditionForm.value)
    pageInfo.value.pageIndex = 1; // 最好重置pageIndex，因为有些数据很少，当处于非首页查询时容易误解
    if (queryParams.value.condition) {
        const { dateTimes, status, operateType } = conditionForm.value
        queryParams.value.condition.status = status;
        queryParams.value.condition.operateType = operateType;
        timeRangeTransform(dateTimes, queryParams);
    }
    selectData();
}
const reasonListShow = ref(false)
const reasonList = ref(['123', '456', '789']) // 子组件mount在父之前，导致最初的赋值没有给子组件，需要在下面事件触发时重新赋值
const reasonParam = Object.assign({}, queryParamsInit, {
    "condition": {
        "maintainId": 1722507685184229378
    }
})
const showLog = async (logId: number) => {
    console.log(logId)
    reasonParam.condition.maintainId = logId
    const res = await exceptionQuery(reasonParam)
    if (res && res.data) {
        reasonList.value = ((res.data) as any).records
    };
    reasonListShow.value = true

}
const getTagType = (value: number) => {
    switch (value) {
        case 2:
            return 'success'
        case 3:
            return 'warning'
        case 9:
            return 'danger'
        default:
            return 'info'
    }
}
</script>
<style lang="scss" scoped>
@import "./Index.scss";
</style>